<template>
  <div class="user-detail-con">
    <div class="user-info-text-center">
      <a-avatar shape="circle" :size="64" :src="userAvatar" />
      <p class="qc-m-8">
        <strong style="font-size: 20px">{{ userName }}</strong>
      </p>
      <p>闲来三两事,与君共此时</p>
    </div>
    <a-row>
      <a-col :span="24">
        <div class="qc-description-term">
          <BankOutlined class="qc-mr-8" />
        </div>
        <div class="qc-description-detail">
          <p>后端工程师</p>
        </div>
      </a-col>

      <a-col :span="24">
        <div class="qc-description-term">
          <ClusterOutlined class="qc-mr-8" />
        </div>
        <div class="qc-description-detail">
          <p>区域事业部-华中事业部-技术部</p>
        </div>
      </a-col>

      <a-col :span="24">
        <div class="qc-description-term">
          <EnvironmentOutlined class="qc-mr-8" />
        </div>
        <div class="qc-description-detail">
          <p>中国-湖北省-宜昌市</p>
        </div>
      </a-col>
    </a-row>
    <a-row type="flex" justify="space-around" align="middle">
      <a-col :span="6" class="qc-tooltip">
        <WeiboOutlined />
      </a-col>
      <a-col :span="6" class="qc-tooltip">
        <ZhihuOutlined />
      </a-col>
      <a-col :span="6" class="qc-tooltip">
        <WechatOutlined />
      </a-col>
      <a-col :span="6" class="qc-tooltip">
        <DingdingOutlined />
      </a-col>
    </a-row>
    <a-divider dashed />
    <div class="qc-description-list">
      <div class="qc-description-title">{{ t('dashboard.user-info.userDetail.label') }}</div>
      <div class="qc-description-content">
        <a-tag>JAVA</a-tag>
        <a-tag>JFINAL</a-tag>
        <a-tag>JS</a-tag>
        <a-tag>VUE</a-tag>
        <a-tag>ant design vue</a-tag>
      </div>
    </div>
    <a-divider dashed />
    <div>
      <RadarChart style="max-height: 460px; width: 100%" v-bind="RadarConfig"></RadarChart>
    </div>
  </div>
</template>
<script lang='ts'>
import { computed, defineComponent } from 'vue'
import { useStore } from '/@/store'
import { cdnUrl } from '/@/api/core/upload'
import {
  BankOutlined,
  ClusterOutlined,
  EnvironmentOutlined,
  WeiboOutlined,
  ZhihuOutlined,
  WechatOutlined,
  DingdingOutlined,
} from '@ant-design/icons-vue'
import { useI18n } from 'vue-i18n'
import { RadarChart, RadarChartProps } from '@opd/g2plot-vue'
import { radarData } from '../inteface'
export default defineComponent({
  name: 'DashboardUserDeatil',
  components: {
    BankOutlined,
    ClusterOutlined,
    EnvironmentOutlined,
    WeiboOutlined,
    ZhihuOutlined,
    WechatOutlined,
    DingdingOutlined,
    RadarChart,
  },
  setup() {
    const store = useStore()
    const { t } = useI18n()
    const userAvatar = computed(() => {
      return store.state.user.userAvatar ? cdnUrl + store.state.user.userAvatar : ''
    })

    const RadarConfig: RadarChartProps = {
      data: radarData,
      xField: 'item',
      yField: 'score',
      seriesField: 'user',
      meta: {
        score: {
          alias: t('dashboard.user-info.userDetail.fraction'),
          min: 0,
          max: 80,
        },
      },
      xAxis: {
        line: null,
        tickLine: null,
        grid: {
          line: {
            style: {
              lineDash: null,
            },
          },
        },
      },
      yAxis: {
        line: null,
        tickLine: null,
        grid: {
          line: {
            type: 'line',
            style: {
              lineDash: null,
            },
          },
        },
      },
      // 开启辅助点
      point: {
        size: 2,
      },
    }

    const userName = store.state.user.userName
    return {
      t,
      userAvatar,
      userName,
      RadarConfig,
    }
  },
})
</script>
<style lang='less' scoped>
.qc-m-8 {
  margin: 8px;
}
.qc-mr-8 {
  margin-right: 8px;
}
.qc-description-term,
.qc-description-detail {
  display: table-cell;
  padding-bottom: 16px;
  line-height: 20px;
}
.qc-tooltip {
  text-align: center;
}
.qc-tooltip > .anticon {
  font-size: 30px;
}

.qc-description-content {
  margin-top: 8px;
}
.user-info-text-center {
  text-align: center;
}

::v-deep(.ant-divider-horizontal) {
  margin: 16px 0px;
}
</style>